<template>
       <div class="demo-collapse">
    <el-collapse accordion>
      <el-collapse-item name="1">
        <template #title>&nbsp;&nbsp;
          展开查询<el-icon class="header-icon">
            <info-filled />
          </el-icon>
        </template>
        <div>
            <el-row :gutter="20" style="width: 1000px;margin-top: -30px;margin-left: 20px;">
            <el-col :span="6"><div class="grid-content ep-bg-purple" />
              工艺编码  <el-input v-model="query.processRouteNo" />
        
           </el-col>
            <el-col :span="6" style="margin-left: 370px"><div class="grid-content ep-bg-purple" />
              工艺名称 <el-input v-model="query.processRouteName" />
           
            </el-col>
        </el-row>
          
        <el-row :gutter="20" style="width: 1000px;margin-top: -30px;margin-left: 20px;">
        <el-col :span="6" ><div class="grid-content ep-bg-purple" />
          物料 <el-select v-model="query.inventoryInfoId" placeholder="请选择物料">
        <el-option v-for="item in ItemInfoList" :key="item.inventoryInfoId"  :label="item.itemName" :value=item.inventoryInfoId />
      </el-select>
    </el-col>
    <el-col :span="6" style="margin-left: 1000px;"><div class="grid-content ep-bg-purple" />
        <el-button @click="resetForm()">重置</el-button>
        <el-button type="primary" style="width: 100px;" @click="GetData()">查询</el-button>
        <!-- <el-button @click="router.push('/ProducManagement/ProcessRouteAdd')" type="primary">+新增工艺</el-button> -->
    </el-col>
  </el-row>
        </div>
      </el-collapse-item>

    </el-collapse>
  </div>
  <div style="background-color: white;width: 100%;height: 100%;">
        <h3 style="margin: 15px;">
            <span style="font-size: 17px;font-weight: 700;">工艺路线列表</span>
        </h3>
        <el-button type="success" style="float: right;margin-top: -40px;margin-right: 20px;" @click="router.push('/ProducManagement/ProcessRouteAdd')">+新增工艺路线</el-button>
        <hr  style='background-color:#d3d3d3; height:1px; border:none;'>
        <div style="margin: 20px;">
          <el-table :data="tableData" stripe style="width: 2000px" border :header-cell-style="{background:'#f5f7fa'}">
    <el-table-column prop="processRouteId" label="序号" width="80" />
    <el-table-column prop="processRouteNo" label="工艺编码" width="180" />
    <el-table-column prop="processRouteName" label=" 工艺名称" width="180"/>
    <el-table-column prop="itemName" label="物料" width="180" />
    <el-table-column prop="processVersion" label="工艺版本" width="180" />
    <el-table-column prop="handleTime" label="创建时间" width="180">
      <template #default="{row}">
        {{ moment(row.handleTime).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
    </el-table-column>
    <el-table-column prop="handle" label="创建人" width="180" />
    <el-table-column prop="processRouteStatus" label="状态" width="180">
      <template #default="{row}">
       <el-text v-if="row.processRouteStatus==0" type="primary">有效</el-text>
       <el-text v-else type="danger">无效</el-text>

      </template>
    </el-table-column>
  </el-table>
    <!-- 分页 -->
    <div >
          <el-pagination
                  v-model:current-page="query.pageIndex"
                  v-model:page-size="query.pageSize"
                  layout="prev, pager, next"
                  :total="query.totalCount"
                  class="mt-4"
                  @current-change="handleCurrentChange"
                  style="float: right;"
                />
                <span style="float: right;margin-top: 4px">共{{ query.totalCount }}条</span>
        </div>
        </div>
      
      </div>
  



</template>

<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import axios from 'axios'
import moment from 'moment';

const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;
import router from '@/router';
import { InfoFilled } from '@element-plus/icons-vue'
const query=reactive({
  processRouteNo:'',
  processRouteName:'',
  inventoryInfoId:'',
  // processRouteStatus:'',
  pageIndex:1,
  pageSize:8,
  totalCount:0,
  totalPage:0
})

//定义数组 存储数据
const tableData =ref([])
//显示
const GetData=()=>{
axios.post(apiurl+'/api/ShowProducManagement/ShowProcessRoute',{
  processRouteNo:query.processRouteNo,
  processRouteName:query.processRouteName,
  inventoryInfoId:query.inventoryInfoId||0,
  // processRouteStatus:query.processRouteStatus,
  pageIndex:query.pageIndex,
  pageSize:query.pageSize
})
.then((res)=>{
  console.log(res)
  tableData.value=res.data.data.list
  query.totalCount=res.data.data.totalCount
  query.totalPage=res.data.data.totalPage
})
.catch((err)=>{
  console.log(err)
})
}

//钩子函数
onMounted(()=>{
  GetData()
  getItemInfoList()
})

//分页
const handleCurrentChange = (val: number) => {
  query.pageIndex = val;
  GetData();
};

//物料下拉
const ItemInfoList:any = ref([])
const getItemInfoList = () => {
  axios.post(apiurl+'/api/ShowProducManagement/ShowItemInfo',{})
  .then((res)=>{
  console.log(res)
  ItemInfoList.value = res.data.data
})
.catch((err)=>{
  console.log(err)
})
}


//重置
const resetForm=()=>{
  query.processRouteNo=''
  query.processRouteName=''
  query.inventoryInfoId=''
  GetData()
}

</script>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>